 //获取元素
const title = document.querySelector('#title')
const todoList = document.querySelector('#todolist')
const doneList = document.querySelector('#donelist')
load()//刷新之后获取本地数据加载页面
title.addEventListener('keyup', function (e) {
  const arr = getData() // 获取本地存储的数据 放到新数组
  if (e.keyCode === 13 && title.value !== '') {
    
    const todo = {
      title:title.value,
      done:false
    }
    // console.log(arr);
    arr.push(todo)// 把输入内容追加到新数组里
    saveData(arr)// 把新数组的内容存储到本地
    load()// 渲染页面
    title.value=''
  }
})
// 存储数据到本地
function saveData(data) {
  localStorage.setItem('todo', JSON.stringify(data))
}
function getData() {
  const data = localStorage.getItem('todo')//获取本地数据
  if (data) {
    return JSON.parse(data)//转化成数组
  } else {
    return []
  }
}
// 渲染函数
function load() {
  todoList.innerHTML = ''
  const todoCount = document.querySelector('#todocount')
  //渲染页面
  const arr = getData()//获取本地
  // console.log(arr);
  arr.forEach((item, index) => {
    const li = document.createElement('li')
    li.innerHTML = `<input type='checkbox' data-check='${index}'> <p>${item.title}</p> <a href='javascript:;' data-id='${index}'></a>`
    
    // console.log(index);
    todoList.appendChild(li)
  })
  todoCount.innerHTML=arr.length
}
// 删除
function del() {
  todoList.addEventListener('click', function (e) {
    // console.log(e.target.dataset.id);
    if (e.target.tagName === 'A') {
      const id = e.target.dataset.id//获取自定义属性（索引值）
      // 先获取本地存储的数组  根据索引值删除后把数组返回本地
      const data = getData()
      // console.log(data);
      data.splice(id, 1)
      saveData(data)
      load()
    }
  })
}
del()


